import React, { PureComponent } from 'react'
import './style.css'

export default class ShowMousePoint extends PureComponent {
    state = {
        x: 0,
        y: 0
    }

    divRef = React.createRef()

    handleMouseMove = (e) => {
        // 更新 x 和 y 的值
        const { left, top } = this.divRef.current.getBoundingClientRect()
        this.setState({
            x: e.pageX - left,
            y: e.pageY - top
        })
        console.log(this.state.x, this.state.y);
    }

    render() {
        return (
            <div ref={this.divRef} className='point' onMouseMove={this.handleMouseMove}>
                <h2>
                    鼠标x: {this.state.x}
                    鼠标y: {this.state.y}
                </h2>
            </div>
        )
    }
}
